<template>
  <!--    商店列表-->
  <div class="shopList">
    <van-dropdown-menu active-color="#3190e8">
      <van-dropdown-item @change="changOrder" v-model="orderBy" :options="orderOptions"/>
    </van-dropdown-menu>
    <div class="shopList-header">
      <van-icon name="shop-o"/>
      <span>附近商家</span>
    </div>
    <div class="shopList-content">
      <van-pull-refresh
        v-model="loadObj.refreshing"
        @refresh="onRefresh" success-text="刷新成功">
        <van-list
          v-model="loadObj.loading"
          :finished="loadObj.finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div v-for="item in shopList" :key="item.id"
               @click="goDetail('/home/shopInfo',item.id)"
               class="shopItem">
            <img v-lazy="imgBaseUrl+item.image_path" alt="" class="shopImg">
            <div class="textInfo">
              <div class="title">
                <span>品牌</span>
                <h3>{{item.name}}</h3>
                <ul>
                  <li>保</li>
                  <li>准</li>
                  <li>票</li>
                </ul>
              </div>
              <div class="evaluate">
                <van-rate v-model="item.rating" :size="22" color="#ff9a0d" allow-half void-icon="star" void-color="#eee"
                          readonly/>
                <span class="rateText">{{item.rating}}</span>
                <span class="volume">月售{{item.recent_order_num}}单</span>
                <div class="fenNiao">
                  <span>蜂鸟传送</span>
                  <b>准时达</b>
                </div>
              </div>
              <div class="distance">
              <span class="distribution">
                ￥{{item.float_minimum_order_amount}}起送／配送费约￥{{item.float_delivery_fee}}
              </span>
                <span class="time">{{item.distance}}／<b>{{item.order_lead_time}}</b></span>
              </div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ShopList',
  data () {
    return {
      limit: 0, // 店铺显示的数量
      shopSum: 100, // 商店总数量
      loadObj: {
        loading: false,
        finished: false,
        refreshing: false
      },
      shopList: [],
      orderBy: this.$route.meta.title === '首页' ? 5 : 4, // 排序
      orderOptions: [
        {
          text: '智能排序',
          value: 4
        },
        {
          text: '距离最近',
          value: 5
        },
        {
          text: '销量最高',
          value: 6
        },
        {
          text: '起送价格最低',
          value: 1
        },
        {
          text: '配送速度最快',
          value: 2
        },
        {
          text: '评分最高',
          value: 3
        }
      ]
    }
  },
  created () {
    this.getShopSum()
  },
  methods: {
    async getShopSum () {
      const { data: { count } } = await this.$http.getShopSum()
      this.shopSum = count
    },
    async onLoad () {
      if (this.limit >= this.shopSum) {
        this.loadObj.finished = true
        return
      }
      this.limit += 20
      const { data } = await this.$http.getShopList(this.limit, this.orderBy)
      this.shopList = data
      this.loadObj.loading = false
    },
    async onRefresh () {
      // 清空列表数据
      this.finished = false

      // 重新加载数据
      this.loadObj.loading = true
      // 初始化数据
      this.shopList = []
      this.limit = 0
      // 重新加载
      await this.onLoad()
      this.loadObj.refreshing = false
    },
    changOrder () {
      this.onRefresh()
    }
  }
}
</script>

<style lang="scss" scoped>
  .shopList {
    background: #ffffff;
    min-height: 3000px;
    padding-top: 60px;

    .van-dropdown-menu {
      width: 100%;
      position: fixed;
      top: 60px;
      left: 0;
      z-index: 100;

      /deep/ .van-dropdown-menu__bar {
        height: 60px;

        .van-ellipsis {
          font-size: 20px;
        }
      }

      /deep/ {
        .van-cell {
          font-size: 20px;
          padding: 20px 40px;
        }
      }
    }

    .shopList-header {
      display: flex;
      align-items: center;
      margin-top: 20px;
      padding: 20px;
      font-size: 20px;
      background: #ffffff;
      color: #999999;

      .van-icon-shop-o::before {
        font-size: 26px;
        margin-right: 10px;
      }
    }

    .shopList-content {
      .shopItem {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #ffffff !important;
        border-bottom: 1px solid #f5f5f5;
        padding: 20px;

        .shopImg {
          display: block;
          width: 110px;
          height: 110px;
        }

        .textInfo {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: 430px;
          height: 120px;

          .title {
            display: flex;
            align-items: center;
            position: relative;

            span {
              background: #ffd930;
              padding: 0 5px 2px;
              font-weight: bold;
              margin-top: 3px;
              border-radius: 4px;
              font-size: 20px;
            }

            h3 {
              width: 250px;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              margin: 0 0 0 10px;
              font-size: 26px;
            }

            ul {
              display: flex;
              position: absolute;
              right: 0;

              li {
                padding: 0 3px 1px;
                color: #999999;
                border: 1px solid #eeeeee;
                border-radius: 2px;
                margin: 0 1px;
                font-size: 16px;
              }
            }
          }

          .evaluate {
            display: flex;
            align-items: center;
            position: relative;

            .rateText {
              display: block;
              margin-left: 10px;
              font-size: 15px;
              color: #ff6600;
              margin-top: 2px;
            }

            .volume {
              font-size: 12px;
              color: #666666;
              margin-left: 10px;
            }

            .fenNiao {
              position: absolute;
              right: 0;
              font-size: 12px;

              span {
                background: #3190e8;
                color: #ffffff;
                padding: 1px 2px;
                border-radius: 2px;
                margin-right: 5px;
              }

              b {
                font-weight: normal;
                border: 1px solid #3190e8;
                color: #3190e8;
                padding: 0 1px;
                border-radius: 2px;
              }
            }
          }

          .distance {
            display: flex;
            justify-content: space-between;
            font-size: 16px;

            .distribution {
              color: #666666;
            }

            .time {
              color: #999999;

              b {
                font-weight: normal;
                color: #3190e8;
              }
            }
          }
        }

        /deep/ .van-icon {
          font-size: 22px !important;
        }
      }
    }
  }
</style>
